<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>成绩添加</title>
	<link rel="stylesheet" href="../css/layui.css">
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
	</style>
</head>

<body>
	
	<form>
		<div class="layui-row">
			<div class="layui-col-md6 layui-col-md-offset3" id="vue-root">
				<div class="layui-form-item">
					<label class="layui-form-label">期号</label>
					<div class="layui-input-block">

						<select class="layui-input issue" v-model="item.termId" v-validate="'required'"
							data-vv-name="期号">
							<option disabled="disabled" :value="null">请选择期号</option>
							<option v-for="term in terms" :key="term.id" :value="term.id" v-text="term.name"></option>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">班级名称</label>
					<div class="layui-input-block">
						<select class="ui-select layui-input classname" v-model="item.classesId" v-validate="'required'"
							data-vv-name="班级">
							<option disabled="disabled" :value="null">请选择班级</option>
							<option v-for="classes in classess" :key="classes.id" :value="classes.id"
								v-text="classes.name"></option>
						</select>
					</div>
				</div>
				<!-- <div class="layui-form-item">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-block">
                        <input placeholder="请输入学号" class="layui-input studentid" v-model="item.studentNo"
                            v-validate="'required'" data-vv-name="学号">
                    </div>
                </div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input placeholder="请输入姓名" class="layui-input studentname" v-model="item.studentName"
							v-validate="'required'" data-vv-name="姓名">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">课程</label>
					<div class="layui-input-block">
						<select class="layui-input course " v-model="item.courseId" v-validate="'required'"
							data-vv-name="课程">
							<option disabled="disabled" :value="null">请选择课程</option>
							<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
							</option>
						</select>

					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">成绩</label>
					<div class="layui-input-block">
						<input placeholder="请输入成绩" class="layui-input score" v-model="item.score"
							v-validate="'required'" type="number" data-vv-name="成绩">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<div class="offer" @click="submit0">立即提交</div>
						<div class="return" onclick="history.back()">取消</div>
					</div>
				</div>
			</div>
		</div>
	</form>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				url: '/pc/score',
				terms: [],
				courses: [],
				classess: [],
				item: {
					termId: null,
					classesId: null,
					courseId: null
				}
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				var _this = this;
				axios.get('/pc/term/all/' + schoolId).then(function (res) {
					_this.terms = res.data;
				});
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					_this.classess = res.data;
				});
				axios.get('/pc/course/all/' + schoolId).then(function (res) {
					_this.courses = res.data;
				});
				this.init();
			},
			methods: {
				submit0: function () {
					if (!(this.item.classesId && this.item.studentName)) {
						alert('请填写完整');
						return;
					}
					axios.get('/pc/student/search/' + this.schoolId, {
						params: {
							classesId: this.item.classesId,
							name: this.item.studentName
						}
					}).then(function (res) {
						var studentId = res.data;
						if (!studentId) {
							alert('找不到对应的学生');
							return;
						}
						this.item.studentId = studentId;
						this.submit();
					}.bind(this));

				}

			}
		}));
	</script>

</body>

</html>